<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 20px">
      <!-- 警示语 -->
      <el-alert title=" 添加商品信息" type="info" center show-icon> </el-alert>
      <!-- 步骤条 -->
      <el-steps
        :active="activeName * 1"
        align-center
        finish-status="success"
        style="margin-top: 20px"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数">
        </el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- 左边导航 -->

      <el-tabs
        tab-position="left"
        v-model="activeName"
        @tab-click="handleClick"
        :before-leave="before_leave"
      >
        <el-tab-pane label="基本信息">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="ruleForm.goods_name"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="商品价格(元)" prop="goods_price">
              <el-input v-model="ruleForm.goods_price"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="ruleForm.goods_weight"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="ruleForm.goods_number"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="商品分类" prop="goods_cat">
              <br />
              <el-cascader
                v-model="value"
                :options="options"
                :props="props"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
               
           <ul>
               <li v-for="(item,index) in list" :key="index" class="li1">
                {{item.attr_name}}
           <el-checkbox v-model="item.attr_id" label="it" border v-for="( it,idx) in  item.attr_vals.split(' ')" :key="idx"></el-checkbox>
               </li>
           </ul>
        </el-tab-pane>
        <el-tab-pane label="商品属性">
            <ul>
               <li v-for="(item,index) in list1" :key="index">
                {{item.attr_name}}
                 <el-input v-model="item.attr_vals"></el-input>
               </li>
           </ul>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
             <el-button type="primary">点击上传图片</el-button>
        </el-tab-pane>
        <el-tab-pane label="商品内容">
            <textarea name="" id="" cols="100" rows="10">
            </textarea>
             <el-button type="primary" @click="add()">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { cateList, threelist, attrlist,addGoods } from "../../utils/api";
export default {
  data() {
    return {
      activeName: "0", // 标签页绑定数据
      ruleForm: {
        goods_name: "",
        goods_price: "0",
        goods_weight: "0",
        goods_number: "0",
      },
      value: [], // 双向数据绑定
      options: [],
      list:[],
       list1:[],
      props: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        goods_price: [{ required: true, message: "价格不能为空" }],
        goods_weight: [{ required: true, message: "价格不能为空" }],
        goods_number: [{ required: true, message: "价格不能为空" }],
        goods_cat: [{ required: true, message: "请选择分类", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getlist();
  },
  methods: {
    //  获取联级选择器数据
    async getlist() {
      var res = await threelist();
      console.log(res);
      this.options = res.data.data;
    },

    //   标签页绑定事件
    async handleClick() {
      //    if(this.activeName == "1"){
      //     var id = this.value[this.value.length - 1];
      //     var res = await attrlist(id)
      //    }
    },
    //   级联选择器的change事件
    async handleChange() {},
    //   tabs标签页绑定事件
    before_leave(a, b) {
      console.log(a, b);
      //    判断索引不等于0 点下面四个的时候
      if (a != 0) {
        if (this.value.length == 0) {
          this.$message.error("请选择商品分类");
          return false;
        }
      }
      if(a==1){
        var id = this.value[this.value.length - 1];
        var sel = {sel:"many"}
        attrlist(id,sel).then(res=>{
            console.log("5656",res);
            this.list = res.data.data
        })
      }
        if(a==2){
        var id = this.value[this.value.length - 1];
        var sel = {sel:"only"}
        attrlist(id,sel).then(res=>{
            console.log("5656",res);
            this.list1 = res.data.data
        })
      }
    },

    // 添加‘
   async add(){
    this.ruleForm['goods_cat'] = this.value.join(',')
    console.log(this.ruleForm);
    var res =await addGoods(this.ruleForm)
    
    }
  },
};
</script>
<style lang="scss">
.el-alert {
  margin-top: 20px;
}
.li1{
    margin: 10px 0;
    font-size: 20px;
}
</style>